<!-- 调拨单记录 -->
<template>
  <div id="change">
    <div class="change-top">
      供应商&nbsp;
      <el-input style="width: 150px;" v-model="proName" size="small"></el-input>
      <el-button @click="dialogShow = true" size="small"><i class="el-icon-more"></i></el-button>
      <!-- 单据日期&nbsp;
      <el-date-picker size="small" style="width: 150px;" v-model="listDate" type="date" placeholder="选择日期">
      </el-date-picker> -->
      &nbsp;&nbsp;业务员&nbsp;
      <el-select v-model="inBound.employeeId" size="small" style="width: 150px;">
        <el-option label="职员1" :value="1">
        </el-option>
        <el-option label="职员2" :value="2">
        </el-option>
      </el-select>
      业务类别&nbsp;
      <el-select v-model="inBound.bKind" size="small" style="width: 150px;">
        <el-option label="业务1" :value="1">
        </el-option>
        <el-option label="业务2" :value="2">
        </el-option>
      </el-select>
      <span>
        <el-button size="small" style="margin-left: 10px;" type="primary">查询</el-button>
        <el-button size="small" @click="saveInBound">保存</el-button>
        <el-button size="small" type="primary">导入</el-button>
        <el-button size="small" type="primary">导出</el-button>
        <el-button size="small" type="success">审核</el-button>
        <el-button size="small" type="danger">删除</el-button>
      </span>
      <br>
      <PublicLink style="position: relative;left: 1000px;top: -20px;" />
    </div>
    <div class=" change-content">
      <el-table @row-click="handlerClick" :row-style="{ height: '55px' }" show-summary :summary-method="getSummaries"
        height="450px" :data="inBoundList" border style="width: 100%;font-size: 13px;">
        <el-table-column style="width: 120px;padding-left: 10px;">
          <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
        </el-table-column>
        <el-table-column prop="goodcode" label="商品编号" width="260">
          <template slot-scope="scope">
            <el-input style="width: 180px" size="small" v-if="scope.row.isEdit" v-model="scope.row.goodcode"></el-input>
            <el-button v-if="scope.row.isEdit" @click="goodsShow = true" size="small"><i
                class="el-icon-more"></i></el-button>
            <span v-else>{{ scope.row.goodcode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodname" label="商品名称" width="150">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit" v-model="scope.row.goodname"></el-input>
            <span v-else>{{ scope.row.goodname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="商品类别" width="120">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌" width="120">
        </el-table-column>
        <el-table-column prop="unitname" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="120">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit" v-model="scope.row.num"></el-input>
            <span v-else>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="wholeBag" label="整件散包" width="120">
        </el-table-column>
        <el-table-column prop="unitPrice" label="入库单价" width="150">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit" v-model="scope.row.unitPrice"></el-input>
            <span v-else>{{ scope.row.unitPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库" width="150">
          <template slot-scope="scope">
            <el-select size="small" v-if="scope.row.isEdit" v-model="scope.row.wId">
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="detailRemark" label="备注" width="160">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit" v-model="scope.row.detailRemark"></el-input>
            <span v-else>{{ scope.row.detailRemark }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-button style="position: relative;right: -1200px;" @click="goto('inBoundList')">历史单据</el-button>
    </div>
    <el-dialog top="20px" title="选择供应商" :visible.sync="dialogShow">
      <ProviderChoose ref="choosePro" :dialogShow="dialogShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
      <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsShow = false">取 消</el-button>
        <el-button type="primary" @click="yesGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PublicLink from '../public_com/PublicLink.vue';
import ProviderChoose from '../public_com/ProviderChoose.vue';
import GoodsChoose from '../public_com/GoodsChoose.vue';


export default {
  name: 'AddInBound',
  components: {
    PublicLink,
    ProviderChoose,
    GoodsChoose
  },
  data() {
    return {
      goodsShow: false,
      dialogShow: false,
      //分页参数
      listDate: '',
      switchValue: '1',
      inBound: {
        inBoundId: '',
        bKind: '',
        employeeId: '',
        truckingNumber: '200126897',
        state: '',
        createDate: '',
        providerId: '',
      },
      // inBoundDetail: [
      //   {
      //     ibDetailId: '',
      //     inBoundId: '',
      //     goodcode: '',
      //     goodname:'',
      //     unitPrice: '',
      //     num: '',
      //     wholeBag: '',
      //     detailRemark: '',
      //     wId: '',
      //   }
      // ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input: '',
      inBoundList:
        [
          {
            ibDetailId: '',
            inBoundId: '',
            goodcode: '',
            goodname: '',
            unitPrice: '',
            num: '',
            wholeBag: '',
            detailRemark: '',
            wId: '',
            isEdit: false
          }
        ],
      value1: '',
      proName: '',
    }
  },
  methods: {
    addRow() {
      this.inBoundList.push({
        imagename: '',
        goodcode: '',
        brandName: '',
        origin: '',
        goodname: '',
        categoryName: '',
        unitname: '',
        wId: '',
        ibDetailId: '',
        inBoundId: '',
        goodcode: '',
        unitPrice: '',
        num: '',
        wholeBag: '',
        isEdit: false
      })
    },
    reduceRow() {
      if (this.inBoundList.length > 1) {
        this.inBoundList.pop()
      }
    },
    goto(to) {
      this.$router.push(to)
    },
    handlerClick(row, column, event) {
      this.inBoundList.forEach((store, index) => {
        store.isEdit = false
      })
      row.isEdit = true
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === "num") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });

      return sums;
    },
    yes() {
      this.dialogShow = false
      var list = this.$refs.choosePro.selectionList
      this.proName = list[0].providerName
      this.inBound.providerId = list[0].providerId
    },
    yesGoods() {
      this.goodsShow = false
      // this.goodsList = 
      // console.log(this.goodsList)
      //遍历商品列表
      this.inBoundList = this.$refs.chooseGoods.selectionList
    },
    //添加入库单
    saveInBound() {
      //数据校验

      console.log(this.inBound)
      //获取入库单明细
      var details = []
      this.inBoundList.forEach((ib, index) => {
        details.push({
          goodcode: ib.goodcode,
          unitPrice: ib.unitPrice,
          goodname: ib.goodname,
          num: ib.num,
          wholeBag: ib.wholeBag,
          detailRemark: ib.detailRemark,
          wId: ib.wId
        })
      })
      // console.log(details)
      const formdata = new FormData()
      formdata.append('inBound', JSON.stringify(this.inBound))
      formdata.append("inBoundList", JSON.stringify(details))
      this.axios.post('/store/ib/addInBound',
        formdata
      ).then(rs => {
        if (rs.data.code = 200) {
          this.successMessage("添加成功")
          this.inBoundList =
            [
              {
                ibDetailId: '',
                inBoundId: '',
                goodcode: '',
                goodname: '',
                unitPrice: '',
                num: '',
                wholeBag: '',
                detailRemark: '',
                wId: '',
                isEdit: false
              }
            ]
        }
      })
    },
    successMessage(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    errorMessage(msg) {
      this.$message({
        message: msg
        ,
        type: 'error'
      })
    }
  },

}
</script>

<style scoped>
#change {
  width: 100%;
  height: 100%;
}

.change-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.change-content {
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 40px;
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
  background-color: #fff1d4;
}


td.el-table__cell .el-button {
  width: 40px;
  margin-left: 0px;
}
</style>